<template>
  <div>
    <van-action-sheet
      v-model:show="isShow"
      v-bind="attrs"
      :title="title"
      :closeable="false"
    >
      <div
        v-if="confirmText"
        class="van-action-sheet__close sheet-btn sheet-btn__confirm"
        @click="confirm"
      >
        {{ confirmText }}
      </div>
      <div
        v-if="cancelText"
        class="van-action-sheet__close sheet-btn sheet-btn__cancel"
        @click="cancel"
      >
        {{ cancelText }}
      </div>
      <slot />
    </van-action-sheet>
  </div>
</template>

<script>
import { toRefs } from 'vue';
import { useModelWrapper } from '@/hooks/utils';
export default {
  props: {
    modelValue: {
      type: Boolean,
      require: true,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    cancelText: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: ''
    }
  },
  emits: ['onCancel', 'onConfirm', 'update:modelValue'],
  setup(props, { emit, attrs }) {
    const isShow = useModelWrapper(props, emit);

    const confirm = () => {
      emit('onConfirm');
    };

    const cancel = () => {
      emit('onCancel');
      isShow.value = false;
    };

    return { isShow, attrs, ...toRefs(props), confirm, cancel };
  }
};
</script>

<style lang="scss" scoped>
.sheet-btn {
  line-height: var(--van-action-sheet-header-height);
  font-size: var(--van-picker-action-font-size);

  &__cancel {
    color: var(--van-picker-cancel-action-color);
    right: auto;
    left: 0;
  }

  &__confirm {
    color: var(--van-picker-confirm-action-color);
  }
}
</style>